import QtQuick 2.0
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.1
import org.qtproject.qtquick 1.0

import "qrc:/js/resources/Constants.js" as Constant

import "../common"
import "../configure"

Item {
    id: id_login

    width: Constant.width * m_ratio
    height: Constant.height * m_ratio

    property real m_ratio : ApplicationInfo.ratio
    property real progress: 0

    property int m_margin : 10 * m_ratio
    property int m_heightBttn: 40 * m_ratio
    property int m_heightTxtInput: 60 * m_ratio

    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.inputMethod.hide();
        }
    }
    Column {
        width: parent.width
        //anchors.bottom: id_column.top
        y: id_column.y - id_itemSlogan.height - m_margin
        Item {
            id: id_itemSlogan
            width: 200 * m_ratio
            height: 200 * m_ratio
            anchors.horizontalCenter: parent.horizontalCenter

            Image {
                id: id_logo
                source: "qrc:/images/resources/logo_app_info.png"
                anchors.fill: parent

            }

        }
    }
    Column {
        id: id_column
        width: parent.width
        //height: id_logo.height +  id_txtUserName.height + id_txtPassword.height + id_bttnLogin.height + id_bttnRegister.height
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
        spacing: 10 * m_ratio


        Item {
            width: id_txtSlogan.contentWidth

            anchors.horizontalCenter: parent.horizontalCenter

            //anchors.bottom: id_columnTxtUserName.top
            y: id_columnTxtUserName.y - m_margin * 2

            Label {
                id: id_txtSlogan
                text: "More friends, more fun...!"

                color: "#14aaff"
                font.family: "Arial"
                wrapMode: Text.WordWrap
                font.pixelSize: 22 * m_ratio;
            }
        }
        Column {
            id: id_columnTxtUserName
            width: parent.width

            TextField {
                id: id_txtUserName
                style :id_touchStyle
                placeholderText: "username"
                opacity: 0.5

                width: parent.width - m_margin
                height: m_heightTxtInput

                anchors.horizontalCenter: parent.horizontalCenter

                onTextChanged: {
                    id_txtUserName.opacity = 1

                    if (id_txtUserName.length === 0) {
                        id_txtUserName.opacity = 0.5
                    }
                }
            }
        }
        Column {
            width: parent.width

            TextField {
                id: id_txtPassword
                style: id_touchStyle
                placeholderText: "password"
                width: parent.width - m_margin
                height: m_heightTxtInput

                anchors.horizontalCenter: parent.horizontalCenter

                echoMode: TextInput.Password;

                opacity: 0.5

                onTextChanged: {
                    id_txtPassword.opacity = 1

                    if (id_txtPassword.length === 0) {
                        id_txtPassword.opacity = 0.5
                    }
                }
            }
        }
        Column {
            width: parent.width
            anchors.horizontalCenter: parent.horizontalCenter
            ButtonDesigne {
                id: id_bttnLogin

                anchors.horizontalCenter: parent.horizontalCenter

                text: "Login";
                width: parent.width - m_margin
                height: m_heightBttn

                onClicked: {
                    id_pageView.push(Qt.resolvedUrl("WaitPage.qml"));
                    ApplicationInfo.onDologin(id_txtUserName.text, id_txtPassword.text);

                    Qt.inputMethod.hide();
                }
            }
        }

        Column {
            width: parent.width
            anchors.horizontalCenter: parent.horizontalCenter
            ButtonDesigne {
                id: id_bttnRegister

                anchors.horizontalCenter: parent.horizontalCenter

                text: "Register";
                width: parent.width - m_margin
                height: m_heightBttn

                onClicked: {
                    id_pageView.push(Qt.resolvedUrl("qrc:/Qml/gui/page/RegisterPage.qml"));
                }
            }
        }
    }
    Column {
        width: parent.width

        y: id_login.height - id_bttnFacebookLogin.height - 10 * m_ratio
        ButtonDesigne {
            id: id_bttnFacebookLogin
            text: "Login by Facebook";
            width: parent.width * 2 / 3
            height: m_heightBttn
            anchors.horizontalCenter: parent.horizontalCenter

            onClicked: {
                Qt.inputMethod.hide();
            }
        }
    }

    Component {
        id: id_touchStyle
        TextFieldStyle {
            //textColor: "white"
            //font.pixelSize: 28 *m_ratio
            background: Item {
                implicitHeight: 50
                implicitWidth: 320
                BorderImage {
                    source: "qrc:/staticdata/images/textinput.png"
                    border.left: 8
                    border.right: 8
                    anchors.bottom: parent.bottom
                    anchors.left: parent.left
                    anchors.right: parent.right
                }
            }
        }
    }


    Component {
        id: touchStyle
        ButtonStyle {
            panel: Item {
                implicitHeight: 50
                implicitWidth: 320
                BorderImage {
                    anchors.fill: parent
                    antialiasing: true
                    border.bottom: 8
                    border.top: 8
                    border.left: 8
                    border.right: 8
                    anchors.margins: control.pressed ? -4 : 0
                    source: control.pressed ? "qrc:/staticdata/images/button_pressed.png" : "qrc:/staticdata/images/button_default.png"
                    Text {
                        text: control.text
                        anchors.centerIn: parent
                        color: "white"
                        font.pixelSize: 23
                        renderType: Text.NativeRendering
                    }
                }
            }
        }
    }
}
